<template>
	<view class="container" >
		<my-header>
			<view class="top-container">
				<view class="search-view" @click="toSearch">
					<uni-icons type="search"></uni-icons>
					<text class="search-placeholder">搜索你感兴趣的内容</text>
				</view>
				<view>
					<uni-icons type="more-filled" size="24"></uni-icons>
				</view>
			</view>
		</my-header>
		<view class="my-container">
			<view v-show="show" class="flex-btw about-box-top" v-for="(item, index) in lists" :key="index">
			    <view class="flex-btw" @click="goNovelDetail(item.id)">
			        <image :src="item.img" class="book-small-image"></image>
			        <view>
						<view class="novel-name">{{item.name}}</view>
						<view>连载. {{item.latest}}</view>
					</view>
			    </view>
			    <view class="" @click="showCtrl(item.id, index)">
					<uni-icons type="more-filled" size="24"></uni-icons>
				</view>
			</view>
			<view v-show="!show">书架是空的，请到书城添加书籍！</view>
		</view>
		
		<!--  -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				deviceId: '',
				title: 'Hello',
				lists: []
			}
		},
		
		async onLoad() {
			uni.showLoading({
				title: '...'
			})
			const info = uni.getSystemInfoSync()
			this.deviceId = info.deviceId
			
			const bookShelfs = await this.myApi({
				url: '/api/bookshelfs',
				domain: true,
				data: {deviceId: this.deviceId}
			})
			
			uni.hideLoading()
			if(bookShelfs.status == 10001) {
				this.lists = bookShelfs.data
				this.show = true
			} else {
				this.show = false
			}
			
		},
		
		async onReady() {
			let updateMsg = await this.myApi({
				url: '/api/updatechapter',
				domain: true,
				data: {deviceId: this.deviceId}
			})
			
			if(updateMsg.status == 10001) {
				this.lists = updateMsg.data
				this.show = true
			} else {
				this.show = false
			}
		},
		
		async onPullDownRefresh() {
			let updateMsg = await this.myApi({
				url: '/api/updatechapter',
				domain: true,
				data: {deviceId: this.deviceId}
			})
			
			if(updateMsg.status == 10001) {
				this.lists = updateMsg.data
				this.show = true
				uni.stopPullDownRefresh()
			} else {
				this.show = false
			}
		},
		
		methods: {
			// 跳转搜索页面
			toSearch() {
				uni.navigateTo({
					url: '../books/search'
				})
			},
			
			goNovelDetail(id) {
				uni.navigateTo({
					url: '../novel-detail/novel-detail?nid=' + id + '&source=0'
				})
			},
			showCtrl(id) {
				let rmshelf = function (res) { 
					this.myApi({
						url: '/api/removeshelf',
						domain: true,
						data: {id: id, deviceId: this.deviceId},
						method: 'POST'
					}).then((res)=>{
						if (res.status == 10001) {
							this.isAdd = false
							uni.showToast({
								title: '移出成功'
							})
						}
					})
				}
				
				uni.showActionSheet({
				    itemList: ['删除本书'],
					itemColor: '#FF3333',
				    success: rmshelf.bind(this),
				    fail: function (res) {
						console.log('啥也不做')
				    }
				});
			},
			
			
		}
	}
</script>

<style>
	.container {
		/* padding-top: 50rpx; */
		/* height: 100vh; */
	}
	.flex-btw {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	
	.about-box-top {
	    padding: 20rpx 0;
	    /* border-bottom: 1rpx solid #ccc; */
	}
	
	.novel-name {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.detail-btn {
	    padding: 15rpx 40rpx;
	    border: 1rpx solid #ccc;
	    border-radius: 40rpx;
	}
	
	.book-small-image {
	    width: 80rpx;
	    height: 100rpx;
	    padding-right: 25rpx;
	}
	
	.top-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		padding: 0 30rpx;
	}
	
	.search-view {
		border-radius: 40rpx;
		background-color: #F8F8F8;
		padding: 10rpx 40rpx;
		color: #808080;
	}
	
	.search-placeholder {
		margin-left: 20rpx;
	}
</style>
